<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <script type="text/javascript" src="/static/rem-suit.js"></script>
    <script src="https://static.jmlk.co/scripts/dist/jmlink.min.js"></script>
    <title>准了回归福利</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #FFEFBD;
            position: relative;
            padding-bottom: 1.65rem;
            min-height: 100vh;
        }

        #bac_img {
            background: url("{$oss}/web/static/group_recall/top.png?v=2") no-repeat center center;
            background-size: 100%;
            height: 5.22rem;
        }

        #receive_des {
            background: url("{$oss}/web/static/group_recall/receive_des.png?v=2") no-repeat center center;
            background-size: 100%;
            height: 1.3rem;
            margin-top: -0.5rem;
        }

        #middle {
            width: 6.7rem;
            margin: 0 auto;
            background-color: #FFFFFF;
            border-radius: 0.36rem;
            padding: 0.2rem 0.2rem 0.2rem;
        }

        #fid_middle {
            border-style: dotted;
            border-color: #FFCD00;
            border-width: 0.04rem;
            z-index: 2;
        }

        #thank_des {
            background: url("{$oss}/web/static/group_recall/thank_des.png?v=2") no-repeat center center;
            background-size: 100%;
            width: 5.16rem;
            height: 0.32rem;
            margin: 0.46rem 0.64rem 0;
        }

        .coupon {
            width: 4.52rem;
            height: 1.6rem;
            margin: 0.38rem 0.94rem 0;
            border-radius: 0.36rem;
        }

        #btn_info {
            margin: 0.34rem 0.5rem 0;
            position: relative;
        }

        input[type="text"] {
            height: 0.8rem;
            box-sizing: border-box;
            text-align: left;
            height: 0.8rem;
            border: 1px solid #FFD33D;
            color: #333333;
            -web-kit-appearance: none;
            -moz-appearance: none;
            display: block;
            outline: 0;
            padding: 0 1rem;
            text-decoration: none;
            width: 100%;
            border-radius: 0.4rem;
            font-size: 0.24rem;
        }

        /*input[type="text"]:focus {*/
        /*    border: 1px solid #ff7496;*/
        /*}*/

        input[type="text"]::-webkit-input-placeholder {
            color: #C0C0C0;
            font-size: 0.24rem;
            font-weight: bolder;
            text-align: left;
        }

        #btn_info span {
            position: absolute;
            top: 0.24rem;
            left: 0.36rem;
            font-size: 0.24rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 0.34rem;
        }

        #receive_btn {
            background: url("{$oss}/web/static/group_recall/btn.png?v=1") no-repeat center center;
            background-size: 100%;
            width: 1.5rem;
            height: 0.62rem;
            display: inline-block;
            position: absolute;
            top: 0.1rem;
            right: 0.12rem;
        }

        #notice {
            font-size: 0.24rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FF6666;
            line-height: 0.34rem;
            text-align: center;
            margin-top: 0.12rem;
        }

        #des_info {
            width: 5.7rem;
            margin: 0.46rem 0.4rem 0.3rem;
        }

        #btn_info1 {
            margin: 0.2rem 2.4rem 0;
            background: url("{$oss}/web/static/group_recall/btn.png?v=1") no-repeat center center;
            background-size: 100%;
            width: 1.5rem;
            height: 0.62rem;
            display: inline-block;
        }

        #btn_info2 {
            margin: 0.2rem 2rem 0;
            background: url("{$oss}/web/static/group_recall/pop_btn.png?v=1") no-repeat center center;
            background-size: 100%;
            width: 2.2rem;
            height: 0.62rem;
            display: inline-block;
        }

        #des_info .des_icon {
            background: url("{$oss}/web/static/group_recall/des_title.png?v=1") no-repeat center center;
            background-size: 100%;
            width: 3.48rem;
            height: 0.5rem;
            margin: 0 1rem 0.32rem;
        }

        #des_info .des_content {
            font-size: 0.24rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #C0C0C0;
            line-height: 0.4rem;
            word-wrap: break-word;
            word-break: break-all;
            overflow: hidden;
            margin-top: 0.1rem;
        }

        #foot {
            width: 100%;
            height: 2.2rem;
            background: url("{$oss}/web/static/group_recall/bottom.png?v=1") no-repeat center bottom;
            background-size: 100%;
            z-index: 5;
            position: absolute;
            bottom: 0;
        }

        #pop {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            overflow: hidden;
            position: absolute;
            top: 0;
            z-index: 6;
        }

        #pop .pop_body {
            width: 6rem;
            background-color: #FFFFFF;
            border-radius: 0.36rem;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -3rem;
            margin-top: -3rem;
        }

        #pop .pop_body .pop_img {
            background: url("{$oss}/web/static/group_recall/pop.png?v=2") no-repeat center center;
            background-size: 100%;
            width: 4.42rem;
            height: 1.34rem;
            margin-top: -0.6rem;
            margin-left: 0.8rem;
        }

        #pop .pop_coupon {
            font-size: 0.33rem;
            font-family: PingFangSC-Regular, PingFang SC;
            margin: 0.5rem 0.74rem 0.28rem;
            color: #FFCD00;
            text-align: center;
        }

        #pop .pop_btn {
            background: url("{$oss}/web/static/group_recall/pop_btn.png?v=1") no-repeat center center;
            background-size: 100%;
            width: 2.2rem;
            height: 0.62rem;
            margin: 0 1.9rem 0.5rem;
            display: block;
        }

    </style>
</head>
<body>
<div id="top">
    <div id="bac_img"></div>
    <div id="receive_des"></div>
</div>
<div id="middle">
    <div id="fid_middle">
        <div id="thank_des"></div>
        {foreach name="data['photo']" item="vo"}
        <div class="coupon" style='background: url("{$oss}{$vo}") no-repeat center center; background-size: 100%;'></div>
        {/foreach}
        {if condition="$uid"}
        {if condition="$is_receive_coupon"}
        <div id="btn_info2" onclick="commonJsToNative('local','discount_coupon_center?need_auth=2','分群召回','召回h5')"></div>
        {else /}
        <div id="btn_info1" onclick="receiveCoupon()"></div>
        {/if}
        {else /}
        <div id="btn_info">
            <span>+86</span>
            <input type="text" class="form_input" name="tel" placeholder="请输入手机号"/>
            <div id="receive_btn" onclick="receiveCoupon()"></div>
        </div>
        {/if}
        <p id="notice"></p>
        <div id="des_info">
            <div class="des_icon"></div>
            <div class="des_content content1"></div>
            <div class="des_content">2、领取后优惠券发放至准了个人卡券中心，可前往准了APP个人卡券中心查看并使用。</div>
            <div class="des_content content3"></div>
        </div>
    </div>
</div>
<div id="foot"></div>
<div id="pop" style="display: none">
    <div class="pop_body">
        <div class="pop_img"></div>
        {if condition="count($data['photo']) > 1"}
        {foreach name="couponData" item="vo"}
        <div class="pop_coupon">{$vo['desc']}</div>
        {/foreach}
        {else /}
        {foreach name="data['photo']" item="vo"}
        <div class="coupon pop_coupon" style='background: url("{$oss}{$vo}") no-repeat center center; background-size: 100%;'>fdfdf</div>
        {/foreach}
        {/if}
        {if condition="$uid"}
        <div class="pop_btn" onclick="commonJsToNative('local','discount_coupon_center?need_auth=2','分群召回','召回h5')"></div>
        {else/}
        <a class="pop_btn" id="pop_btn"></a>
        {/if}
    </div>
</div>
{if condition="$uid"}{else /}{include file="../apps/web/view/public/open_app.html" /} {/if}
{include file="../apps/web/view/public/sensors.html" /}
</body>
<script src="{$oss}active/seven/js/jquery-v2.1.1.min.js"></script>
<script type="text/javascript">
    var domain = '{$domain}';
    var app_type = '{$app_type}';
    var record_id = '{$data["id"]}';
    var uid = '{$uid}';
    var version = '{$version}';
    var couponName = '{$couponName}';

    function iniCouponName() {
        $('.content1').text('1、输入手机号即可立即领取准了回归福利“' + couponName + '"{:count($couponData)}张。')
        $('.content3').text('3、优惠券有效期为{$data["coupon_expire_time"]}天，不可赠送好友，请尽快使用。')
    }

    iniCouponName();

    function Toast(msg, statusCode) {
        duration = isNaN(statusCode) ? 3000 : statusCode;
        var m = document.createElement('div');
        m.innerHTML = msg;
        m.style.cssText = "max-width:60%;min-width: 150px;padding:0 14px;height: 40px;color: rgb(255, 255, 255);line-height: 40px;text-align: center;border-radius: 4px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999999;background: rgba(0, 0, 0,.7);font-size: 16px;";
        document.body.appendChild(m);
        setTimeout(function () {
            var d = 0.5;
            m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
            m.style.opacity = '0';
            setTimeout(function () {
                document.body.removeChild(m)
            }, d * 1000);
        }, duration);
    }

    function receiveCoupon() {
        if (uid == 0) {
            var tel = $('input[name="tel"]').val();
            if (!tel) {
                Toast('请填写手机号!')
                return;
            }
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/web/sensors_group_recall/receiveCoupon",//url
                data: {type: 2, tel: tel, recall_record_id: record_id},
                success: function (result) {
                    if (result.code === 200) {
                        $('#pop').css('display', 'block')
                    } else {
                        $('#notice').text(result.msg)
                    }
                    console.log(result)
                },
                error: function (result) {
                    console.log(result)
                    Toast('服务异常！');
                }
            });
        } else {
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                headers: {$headers},
                url: "/web/sensors_group_recall/receiveCoupon",//url
                data: {type: 1, recall_record_id: record_id},
                success: function (result) {
                    if (result.code === 200) {
                        $('#pop').css('display', 'block')
                    } else {
                        $('#notice').text(result.msg)
                    }
                    console.log(result)
                },
                error: function (result) {
                    console.log(result)
                    Toast('服务异常！');
                }
            });
        }
    }

    /**
     * 通用跳转
     * @param target string 跳转方式
     * @param link string 跳转地址
     * @param umeng_event_name string 友盟事件名
     * @param umeng_event_label string 友盟事件参数
     */
    function commonJsToNative(target, link, umeng_event_name, umeng_event_label) {
        console.log('target=' + target + ',link=' + link + ',umeng_event_name=' + umeng_event_name + ',umeng_event_label=' + umeng_event_label)
        umeng_event_name = typeof umeng_event_name === 'undefined' ? '' : umeng_event_name;
        umeng_event_label = typeof umeng_event_label === 'undefined' ? '' : umeng_event_label;
        if (umeng_event_name) {
            umeng_event_label += '-' + link
        }
        if (!target)
            return
        else if (target === 'link') {
            link = domain + link
        }


        switch (app_type) {
            case 'ios':
                window.webkit.messageHandlers.commonJsToNative.postMessage({
                    'target': target,
                    'link': link,
                    'umeng_event_name': umeng_event_name,
                    'umeng_event_label': umeng_event_label
                });
                break;
            case 'android':
                console.log('android')
                if (version)
                    androidwebview.commonJsToNative(target, link, umeng_event_name, umeng_event_label)
                else
                    androidwebview.commonJsToNative(target, link)
                break;
            default:
                console.log('not ios or android')
                if ('link' === target) {
                    window.location.href = link
                }
        }
    }

    $(function () {
        new JMLink({
            jmlink: 'https://a0ue2y.jmlk.co/AA63',// 短链地址
            button: document.querySelector('a#pop_btn'),
            plhparams: {
                target: 'local',
                link: 'discount_coupon_center?need_auth=2'
            }
        });
    })
</script>
</html>
